<template>
	<view>
		<view class="miner">
			<view class="static">
				<view class="static-title">累计收益/昨日收益</view>
				<view class="row" style="padding-bottom: 10px;">
					<view class="col">
						<view class="number">{{analysis.total_production}}SID</view>
					</view>
					<view class="col">
						<view class="number">{{analysis.yesterday_production}}SID</view>
					</view>
				</view>
			</view>
			<view class="miner-lists">
				<view class="title">
					<view class="main">已购买云矿机（{{minerList.length}}）</view>
					<view class="sub" @click="buyMiner()">
						<!-- <view class="icon">
							<view class="iconfont icon-jia1 text-highlight"></view>
						</view> -->
						<view class="icon-text">购买矿机</view>
					</view>
				</view>
				<view class="item-box">
					<block v-for="(val,index) in minerList" :key="index">
						<view class="item" @click="userMinerDetail(val)">
							<view class="col left">
								<view class="image">
									<image src="../../../static/icon/pool_dig_img.png" mode="widthFix"></image>
								</view>
								<view class="info">
									<view class="miner-title">{{val.name}}</view>
									<view class="miner-content">编号：{{val.order_sn}}</view>
									<view class="miner-footer">收益：{{val.total_production}}SID</view>
								</view>
							</view>
							<view class="col right">
								<view class="status" :class="'status'+val.status">{{val.status_str}}</view>
							</view>
						</view>
					</block>
					<view class="empty-msg" v-if="minerList.length<=0">
						<view class="icon">
							<view class="iconfont icon-konghezi"></view>
						</view>
						<view class="info">您暂未购买矿机</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/pool/index.js"
	import util from '@/common/util.js'

	export default {
		data() {
			return {
				minerList: [],
				analysis:{
					total_production:0,
					yesterday_production:0,
				}
			}
		},
		onLoad() {
			this.getUserMinerList()
			this.userProductionAnalysis()
		},
		methods: {
			async getUserMinerList() {
				let res = await api.userMinerLists();
				if (res.status == 1) {
					this.minerList = res.data;
				}
			},
			async userProductionAnalysis() {
				let res = await api.userProductionAnalysis()
				if (res.status == 1) {
					this.analysis = res.data;
				}
			},
			buyMiner() {
				uni.navigateTo({
					url: "../../miner/buy-miner-list"
				})
			},
			userMinerDetail(val) {
				uni.navigateTo({
					url: "miner-detail?id=" + val.id
				})
			}
		}
	}
</script>

<style lang="scss">
	view {
		flex-direction: column;
		display: flex;
		box-sizing: border-box;
	}

	.miner {
		padding: 0 15px;

		.static {
			border-radius: 12px;
			box-shadow: 0 0 15px rgba(0, 0, 0, .1);
			padding: 20px 15px;
			background-image: url(../../../static/background/asset_main_bg.png);
			background-size: cover;

			.static-title {
				font-weight: bold;
				font-size: 16px;
				margin-bottom: 10px;
				text-align: center;
			}

			.row {
				flex-direction: row;
				justify-content: space-between;

				.col {

					width: 50%;

					.label {
						color: #9491A5;
						font-size: 12px;
					}

					.number {
						font-weight: bold;
						color: #31E8D6;
						font-size: 16px;
						line-height: 100%;
					}

					.number.small {
						font-size: 18px;
					}

					view {
						text-align: center;
					}
				}
			}
		}

		.miner-lists {
			.title {
				flex-direction: row;
				justify-content: space-between;
				padding: 10px 0;
				margin-top: 10px;

				.main {
					font-size: 16px;
					font-weight: bold;
				}

				.sub {
					flex-direction: row;

					.icon {
						width: 15px;
						height: 15px;
						justify-content: center;
						line-height: 100%;
						opacity: .5;

						.iconfont {
							width: 100%;
							opacity: .5;

						}
					}

					.icon-text {
						color: #31E8D6;
						font-size: 16px;
						height: 20px;
						margin-left: 3px;
						line-height: 100%;
						padding-top: 8px;
						justify-content: center;
						font-weight: bold;
					}
				}
			}

			.item-box {
				.item {
					background-color: #332F4A;
					background-image: url(../../../static/background/pool_bg.png);
					background-size: cover;
					border-radius: 12px;
					box-shadow: 0 0 15px rgba(0, 0, 0, .1);
					flex-direction: row;
					justify-content: space-between;
					padding: 15px;
					margin-bottom: 15px;
					position: relative;

					.col.left {
						width: 100%;
						flex-direction: row;
					}

					.col.right {
						position: absolute;
						top: 15px;
						right: 15px;
						flex-direction: row;
						justify-content: flex-end;

						.status {
							justify-content: center;
							color: #9491A5;
							padding-left: 5px;
							height: 10px;
						}

						.status0 {
							border-left: 10px solid #4CD964;

						}

						.status1 {
							border-left: 10px solid #007AFF;
						}

						.status2 {
							border-left: 10px solid #DD524D;
						}

						.status3 {
							border-left: 10px solid #8A6DE9;
						}

						.status4 {
							border-left: 10px solid #ccc;
						}
					}

					.col {
						.image {
							width: 120px;
							height: 120px;
							justify-content: center;

							image {
								width: 100%;
								justify-content: center;
							}
						}

						.info {
							padding-left: 30px;
							justify-content: center;

							.miner-title {
								font-weight: bold;
							}

							.miner-content {
								font-size: 12px;
							}

							.miner-footer {
								font-size: 12px;
							}
						}
					}
				}
			}
		}
	}
</style>
